﻿<%@ Page Title="All Meal Plans" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="AllMealPlan.aspx.cs" Inherits="AllMealPlan" %>

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" Runat="Server">

<script>
    var paging = '<%=ConfigurationManager.AppSettings["paging"].ToString() %>';
    var pageIndex = 1;
    var pageCount;
    $(window).scroll(function () {
        if ($(window).scrollTop() == $(document).height() - $(window).height()) {
            GetRecords();
        }
    });

    function GetRecords() {
        pageIndex++;
        if (pageIndex >= 2) {
            $("#loader").show();
            $.ajax({
                type: "POST",
                url: "PIMService.asmx/GetMealPlanPaging",
                data: "{'MealPlanId':'0','UserId':'0','page_no':'" + pageIndex + "','page_lenght':'" + paging + "'}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (response) {
                    BindMeaPlans(response,true);
                },
                error: function (msg) {
                    //alert('Connect to database is break. Please check connection info!'); 
                }
            });
        }
    }

    function AddToMyMealPlan(MealPlanId, UserId, OldUser) {
        $("#" + MealPlanId).remove();
        $.ajax({
            type: "POST",
            url: "PIMService.asmx/InsertMyMealPlan",
            data: "{'_mealPlanId':'" + MealPlanId + "','_userId':'" + UserId + "','_oldUser':'" + OldUser + "'}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (response) {
                result = response.d;
                if (result == "OK") {
                }
                else {
                }
            },
            error: function (msg) {
            }
        });


    }

    
</script>
    <script type="text/javascript">

        $(document).ready(function () {
            document.getElementById("<%=GroceryRecipe.ClientID %>").value = '';
            loadMealPlan();
            BindSuggestion();

        });
        function loadMealPlan() {
            document.getElementById("cGrocery").value = '0';
            $.ajax({
                type: "POST",
                url: "PIMService.asmx/GetMealPlanPaging",
                data: "{'MealPlanId':'0','UserId':'0','page_no':'" + pageIndex + "','page_lenght':'" + paging + "'}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (response) {
                    BindMeaPlans(response,true);
                },
                error: function (msg) { //alert('Connect to database is break. Please check connection info!');
                 }
            });

        }
        function AddMyGrocery(MealPlanId, UserId, OldUser) {
            //_oldUser

            $.ajax({
                type: "POST",
                url: "PIMService.asmx/GetRecipeUserIDByMealPlan",
                data: "{'MealPlanId':'" + MealPlanId + "'}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (response) {
                    document.getElementById("<%=GroceryRecipe.ClientID %>").value += response.d;                   
                },
                error: function (msg) {
                }
            });
            $("#gallery li#" + MealPlanId).remove();
            $("#groceryCounter").show();
            var count = parseInt(document.getElementById("cGrocery").value, 10) + 1;
            if(count > 1)
                $('#countGrocery').html(count.toString() + "<br/>Meal plans");
            else
                $('#countGrocery').html(count.toString() + "<br/>Meal plan");
            document.getElementById("cGrocery").value = count.toString();
        }

        function SearchMealPlan() {
            $.ajax({
                type: "POST",
                url: "PIMService.asmx/GetMealPlanByName",
                data: "{'MealPlanName':'" + $("#inPutSearch").val() + "','UserId':'0'}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (response) {
                    BindMeaPlans(response,false);
                }
            });
            return false;
        }

        function ViewMealPlanFullView(mealPlanToView) {
            self.location = "MealPlanDetails.aspx?MealPlanId=" + mealPlanToView + "";
        }


        function BindMeaPlans(response, check) {
            var mealPlan = response.d;
            var html = '';
            var userid = '<%=Session["Userid"]%>';
            if (mealPlan.length > 0) {
                for (var i = 0; i < mealPlan.length; i++) {
                    var varObjectID = mealPlan[i].MealPlanID;
                    var OldUser = mealPlan[i].UserID
                    var varObjectName;
                    var varObjectNameFull;
                    if (mealPlan[i].MealPlanName != null) {
                        //                    varObjectName = mealPlan[i].MealPlanName.substring(0, 10) + ' ..';
                        varObjectName = mealPlan[i].MealPlanName.substring(0, 10);

                        varObjectNameFull = mealPlan[i].MealPlanName;
                        if (varObjectNameFull.length > 10) varObjectName = varObjectName + ' ..';
                    }
                    else {
                        varObjectName = 'No Name..';
                        varObjectNameFull = 'No Name';
                    }
                    var varObjectImage = mealPlan[i].MealPlanPhoto;
                    var rating = mealPlan[i].MealPlanRating;
                    rating = "'" + rating + "'";
                    html += '<li id="' + varObjectID + '"  >'
                    html += '<img class="image-recipe" src="../' + varObjectImage + '" onclick="ViewMealPlanFullView(' + varObjectID + ')">';
                    if (userid != '') {
                        html += '<div class="iconFavorite" onclick="javascript:AddToMyMealPlan(' + varObjectID + ',' + userid + ',' + OldUser + ')">'
                        html += '<img class="imgIcon" src="images/icon-favorite.png"/>'
                        html += '</div>'
                    }
                    html += '<div class="iconAdd" onclick="javascript:AddMyGrocery(' + varObjectID + ')">'
                    html += '<img class="imgIcon"  src="images/icon-add.png"/>'
                    html += '</div>'
                    html += '<div class="recipeName"><p style="padding:3px 0">' + varObjectNameFull + '</p></div>'
                    html += '</li>'
                }
                if (check)
                    $('#gallery').append(html);
                else
                    $('#gallery').html(html);
            }
            $("#loader").hide();
        }


        function BindMeaPlan(response,check) {
            var mealPlan = response.d;
            var html = '';
            var userid = '<%=Session["Userid"]%>';
            if (mealPlan.length > 0) {
                for (var i = 0; i < mealPlan.length; i++) {
                    var varObjectID = mealPlan[i].MealPlanID;
                    var OldUser = mealPlan[i].UserID
                    var varObjectName;
                    var varObjectNameFull;
                    if (mealPlan[i].MealPlanName != null) {
                        //                    varObjectName = mealPlan[i].MealPlanName.substring(0, 10) + ' ..';
                        varObjectName = mealPlan[i].MealPlanName.substring(0, 10);

                        varObjectNameFull = mealPlan[i].MealPlanName;
                        if (varObjectNameFull.length > 10) varObjectName = varObjectName + ' ..';
                    }
                    else {
                        varObjectName = 'No Name..';
                        varObjectNameFull = 'No Name';
                    }
                    var varObjectImage = mealPlan[i].MealPlanPhoto;
                    var rating = mealPlan[i].MealPlanRating;
                    rating = "'" + rating + "'";
                    html += '<li id="' + varObjectID + '" class="ui-widget-content ui-corner-tr form-row-image" >'
                    html += '<a id="' + varObjectID + '" class="none-decoration" href="MealPlanDetails.aspx?MealPlanId=' + varObjectID + '" onclick="ViewMealPlanFullView(' + varObjectID + ')">' + varObjectName + '</a>';
                    html += '<img class="tooltip li-recipe-image" id="' + varObjectID + '" serving="' + 1000 + '" src="data:image/jpeg;charset=utf-8;base64,' + varObjectImage + '" onclick="ViewMealPlanFullView(' + varObjectID + ')">';
                        html += '<a onclick="javascript:AddMyGrocery(' + varObjectID +')" title="Add to grocery" class="ui-icon ui-icon-plus" style="float:right"></a>';
                    html += '</li>'
                }
                if(check)
                    $('#gallery').append(html);
                else
                    $('#gallery').html(html);
            }
            $("#loader").hide();
        }

        function BindSuggestion() {

            $.ajax({
                type: "POST",
                url: "PIMService.asmx/GetMealPlan",
                data: "{'MealPlanId':'0','UserId':'0'}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (response) {
                    var availableTags = '';
                    var object = response.d;
                    for (var i = 0; i < object.length; i++) {
                        var varObjectNameFull;
                        varObjectNameFull = object[i].MealPlanName;

                        var Sugges = varObjectNameFull;
                        availableTags += Sugges + ",";
                    }
                    availableTags = availableTags.substring(0, availableTags.length - 1);

                    var suggestion = availableTags.split(',');
                    $(".suggest").autocomplete({
                        source: suggestion
                    });
                }
            });
        }


        function loadRecipes() {
            var MealPlanId = getUrlVars()["MealPlanId"];
            //alert(MealPlanId);
            $.ajax({
                type: "POST",
                url: "PIMServices.asmx/GetRecipeUserByMealPlan",
                data: "{'MealPlanId':'" + MealPlanId + "'}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (response) {
                    //alert(response.d);
                    //BindRecipe(response);
                },
                error: function (msg) {
                    //alert(msg.constructor) 
                }
            });

        }

        function searchKeyPress() {
            if ($('#inPutSearch').val().length > 0) {
                $('#btnDelete').show();
            } else {
                $('#btnDelete').hide();
            }
        }

        function deleteTextSearch() {
            $('#inPutSearch').val('');
        }
    </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server">
    <div class="searchBox">
        <div class="bgsearch">
            <div class="pd-input">
                <input id="inPutSearch" class="suggest input-search" type="text" name="txtSearchkey"
                    placeholder="Search" onkeyup="searchKeyPress();" autocomplete="on" value="">
                <input id="btnSearch" class="btn-search" type="button" onclick="return SearchMealPlan();">
                <input id="btnDelete" class="btn-delete" onclick="deleteTextSearch(); return false;"
                    type="button">
            </div>
        </div>
    </div>
<section id="bg_content">
	<div class="box01 clearfix">

        <div class="box02" >
            <%--<ul class="ulbox">--%>
<%--                <li ><img src="images/icon01.jpg" style="cursor:pointer" alt="" width="26" height="27"  ></li>
                <li><img src="images/icon02.jpg" style="cursor:pointer" alt="" width="40" height="28" onclick="self.location='CreateMealPlan.aspx'"></li>--%>
                <%--<li class="li01">--%>   
                <div style="float:right;">
                    <asp:ImageButton src="images/icon03.png" CssClass="imgIcon1" ID="btnGrocery" 
                        runat="server" style="cursor:pointer" alt=""  
                        onclick="btnGrocery_Click"  />
                     <div id="groceryCounter" style="display:none;">
                        <div class="arrow-up"></div>
                        <div class="count-css1" >
                            <label id="countGrocery"></label>
                        </div>
                    </div> 
                    </div> 
               <%-- </li>--%>
           <%-- </ul>--%>
        </div>
    </div>
    <div class="clearfix clear">
    	<ul id="gallery" class="ulimg">

        </ul>
    </div>
    <div id="loader" style="display:none; text-align:center;" >
        <img src="images/load.gif"/>
    </div>
</section>
<input type="hidden" id="cGrocery"/>
<asp:HiddenField id="GroceryRecipe" runat="server"/>
</asp:Content>

